<template>
    <div class="preview">
        <el-dialog
                v-model="dialogVisible"
                title="Tips"
                width="50%"
        >
            <el-form ref="ruleFormRef"  :model="formData" label-width="120px">
                <template v-for="(item,index) in componetlist" :key="index">
                    <render :formData="formData" :eleData="item" isPreview/>
                </template>
            </el-form>
            <div class="btnbox">
                <el-button type="primary" @click="submit(ruleFormRef)">确定</el-button>
                <el-button @click="handleClose">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
    import {defineComponent, ref} from 'vue';
    import render from "./render.vue";
    import type { ElForm } from 'element-plus'
    export default defineComponent({
        name: 'preview',
        components:{render},
        setup() {
            const componetlist = ref([])
            const dialogVisible = ref(false)
            const formData = ref({})
            const open = (list:any)=>{
                componetlist.value = JSON.parse(JSON.stringify(list))
                dialogVisible.value = true
            }


            type FormInstance = InstanceType<typeof ElForm>
            const ruleFormRef = ref<FormInstance>()
            const submit = (formEl: FormInstance | undefined)=> {
                console.log(formData.value)
                if (!formEl) return
                formEl.validate((valid:any) => {
                    if (valid) {

                    }
                })
            }

            const handleClose =()=>{
                dialogVisible.value = false
            }
            return {componetlist,formData,dialogVisible,ruleFormRef,handleClose,open,submit};
        },
    });
</script>
<style scoped>
    .btnbox{
        display: flex;
        justify-content: center;
    }
</style>
